<template>
  <div class="refreshPanel">
    <span class="time">更新时间：{{ timeVal }}</span>
    <span v-if="setable" class="opt_icon setIcon" @click="doSet"></span>
    <span v-if="refreshable" class="opt_icon refreshIcon" @click="doRefresh"></span>
  </div>
</template>

<script>
export default {
    name:"refreshPanel",
    data(){
        return{
            // timeText:"",
            // refreshableVal:false,
            // setableVal:false
        }
    },
    props:[
        "timeVal",
        "refreshable",//刷新功能
        "setable"//配置功能
    ],
    mounted(){       
        // this.refreshableVal = !!this.refreshable;
        // this.timeText = this.timeVal;
        // this.setableVal = !!this.setable;
    },
    methods:{
        doRefresh(){
            this.$emit("reGetData")
        },
        doSet(){
            alert("待开发");
        }
    }
}
</script>

<style lang="less" scoped>
    .refreshPanel{
        position: absolute;
        right: 0px;
        top: 0px;
        .time{
            font-weight: 400;
            font-size: 14px;
            line-height: 21px;
            color: rgba(255, 255, 255, 0.4);
            margin-right: 10px;
            line-height: 33px;
            vertical-align: middle;
        }
        .opt_icon{
            display: inline-block;
            width: 14px;
            height: 14px;
            margin-right: 10px;
            vertical-align: middle;
            cursor: pointer;
        }
        .refreshIcon{           
            background: url("~@/assets/image/News@1x.png") no-repeat;
            background-size: 100% 100%;
        }
        .setIcon{
            background: url("~@/assets/image/seticon.png") no-repeat;
            background-size: 100% 100%;
        }
    }
    
</style>